<template>
  <div>
    <!--1视图-->
    <input type="text" v-model="outInGoods" placeholder="输入名称查询" @blur="batexchat" />
    <div ref="purchasechart" style="width: 500px;height: 500px;" ></div>
    <div ref="saleschart" style="width: 500px;height: 500px;"></div>
    <div ref="inventorychart" style="width: 500px;height: 500px;"></div>
    <el-button type="text" @click="excels">导出</el-button>
  </div>

</template>

<script>
import * as echarts from "echarts";
export default {
  name: "FirstView",
  data() {
    return {
      //2属性定义
      outInGoods:'',
      purchaseChart: null,
      salesChart: null,
      inventoryChart: null,
      purchaseData: {
        xAxis: [],
        yAxis: [],
      },
      salesData: {
        xAxis: [],
        yAxis: [],
      },
      inventoryData: {
        xAxis: [],
        yAxis: [],
      }
    }
  }, methods: {
    //3自定义方法
    initCharts() {
      this.purchaseChart = echarts.init(this.$refs.purchasechart);
      console.log("jdcvb"+this.purchaseChart);
      this.salesChart = echarts.init(this.$refs.saleschart);
      this.inventoryChart = echarts.init(this.$refs.inventorychart);
    },
    excels(){
      window.open("http://localhost:10010/emp/emp/export","_top");
    },
    batexchat() {
      this.axios.post("/cropservice/exchat/list?outInGoods="+this.outInGoods).then(res => {
        // 基于准备好的dom，初始化echarts实例
        console.log(res.data)
        var data=res.data;
        this.updateChartData(data);
        this.renderCharts();
      })
    },
    updateChartData(data) {
      // 假设后端返回的数据格式是：{ "inQuantities": [...], "outQuantities": [...], "remainQuantities": [...], "names": [...] }
      console.log("cdvknvkfnvfnvkf"+JSON.stringify(data, null, 2));
      // const months = data.data.map(item => item.month);
      const inQuantities = data.data.map(item => item.inQuantity);
      const outQuantities = data.data.map(item => item.outQuantity);
      const remainQuantities = data.data.map(item => item.remainQuantity);
      const namelist = data.data.map(item => item.outInGoods);
      this.purchaseData.xAxis =namelist;
      this.purchaseData.yAxis = inQuantities;
      // this.purchaseData. zAxis = data.data.monthlist;
      this.salesData.xAxis = namelist;
      this.salesData.yAxis = outQuantities;
      // this.salesData.zAxis = data.data.monthlist;
      this.inventoryData.xAxis = namelist;
      this.inventoryData.yAxis = remainQuantities;
      // this.inventoryData.zAxis = data.data.monthlist;

    },
    renderCharts() {
      // 采购图表配置
      if (this.purchaseChart) {
        const option = {
          title: {
            text: '采购图表'
          },
          legend: {
            data:this.purchaseData.zAxis,
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data:this.purchaseData.xAxis,
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.purchaseData.yAxis,
            type: 'bar',
            showBackground: true,

          }]
        };

        this.purchaseChart.setOption(option);
      }
      if(this.salesChart){
        // 销售图表配置
        const salesOption = {
          title: {
            text: '销售图表'
          },
          legend: {
            data:this.salesData.zAxis,
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data:this.salesData.xAxis,
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.salesData.yAxis,
            type: 'bar',
            showBackground: true,

          }]
        };
        this.salesChart.setOption(salesOption);
      }
      if(this.inventoryChart){
        // 库存图表配置
        const inventoryOption = {
          title: {
            text: '库存图表'
          },
          legend: {},
          tooltip: {},
          xAxis: {
            type: 'category',
            data:this.inventoryData.xAxis,
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.inventoryData.yAxis,
            type: 'bar',
            showBackground: true,

          }]
        };
        this.inventoryChart.setOption(inventoryOption);
      }
    }
  },created() {
    this.initCharts();
  },mounted() {
    this.initCharts();
  }
}
</script>

<style scoped>

</style>